/**
 * 
 */
function render() {
	// the element we want to apply the jScrollPane
	var $el = $('#jp-container').jScrollPane({
				verticalGutter : -16
			}),
	// the extension functions and options
	extensionPlugin = {
		extPluginOpts : {
			// speed for the fadeOut animation
			mouseLeaveFadeSpeed : 500,
			// scrollbar fades out after hovertimeout_t milliseconds
			hovertimeout_t : 1000,
			// if set to false, the scrollbar will be shown on mouseenter and
			// hidden on mouseleave
			// if set to true, the same will happen, but the scrollbar will be
			// also hidden on mouseenter after "hovertimeout_t" ms
			// also, it will be shown when we start to scroll and hidden when
			// stopping
			useTimeout : true,
			// the extension only applies for devices with width > deviceWidth
			deviceWidth : 980
		},
		hovertimeout : null, // timeout to hide the scrollbar
		isScrollbarHover : false,// true if the mouse is over the scrollbar
		elementtimeout : null, // avoids showing the scrollbar when moving from
								// inside the element to outside, passing over
								// the scrollbar
		isScrolling : true,// true if scrolling
		addHoverFunc : function() {
			// run only if the window has a width bigger than deviceWidth
			if ($(window).width() <= this.extPluginOpts.deviceWidth)
				return false;
			var instance = this;
			// functions to show / hide the scrollbar
			$.fn.jspmouseenter = $.fn.show;
			$.fn.jspmouseleave = $.fn.fadeOut;
			// hide the jScrollPane vertical bar
			var $vBar = this.getContentPane().siblings('.jspVerticalBar')
					.hide();
			/*
			 * mouseenter / mouseleave events on the main element also
			 * scrollstart / scrollstop - @James Padolsey :
			 * http://james.padolsey.com/javascript/special-scroll-events-for-jquery/
			 */
			$el.bind('mouseenter.jsp', function() {

				// show the scrollbar
				$vBar.stop(true, true).jspmouseenter();

				if (!instance.extPluginOpts.useTimeout)
					return false;

				// hide the scrollbar after hovertimeout_t ms
				clearTimeout(instance.hovertimeout);
				instance.hovertimeout = setTimeout(function() {
					// if scrolling at the moment don't hide it
					if (!instance.isScrolling)
						$vBar
								.stop(true, true)
								.jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed
										|| 0);
				}, instance.extPluginOpts.hovertimeout_t);
			}).bind('mouseleave.jsp', function() {
				// hide the scrollbar
				if (!instance.extPluginOpts.useTimeout)
					$vBar
							.stop(true, true)
							.jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed
									|| 0);
				else {
					clearTimeout(instance.elementtimeout);
					if (!instance.isScrolling)
						$vBar
								.stop(true, true)
								.jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed
										|| 0);
				}
			});
			if (this.extPluginOpts.useTimeout) {
				$el.bind('scrollstart.jsp', function() {
							// when scrolling show the scrollbar
							clearTimeout(instance.hovertimeout);
							instance.isScrolling = true;
							$vBar.stop(true, true).jspmouseenter();
						}).bind('scrollstop.jsp', function() {
					// when stop scrolling hide the scrollbar (if not hovering
					// it at the moment)
					clearTimeout(instance.hovertimeout);
					instance.isScrolling = false;
					instance.hovertimeout = setTimeout(function() {
						if (!instance.isScrollbarHover)
							$vBar
									.stop(true, true)
									.jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed
											|| 0);
					}, instance.extPluginOpts.hovertimeout_t);
				});
				// wrap the scrollbar
				// we need this to be able to add the mouseenter / mouseleave
				// events to the scrollbar
				var $vBarWrapper = $('<div/>').css({
							position : 'absolute',
							left : $vBar.css('left'),
							top : $vBar.css('top'),
							right : $vBar.css('right'),
							bottom : $vBar.css('bottom'),
							width : $vBar.width(),
							height : $vBar.height()
						}).bind('mouseenter.jsp', function() {
							clearTimeout(instance.hovertimeout);
							clearTimeout(instance.elementtimeout);
							instance.isScrollbarHover = true;
							// show the scrollbar after 100 ms.
							// avoids showing the scrollbar when moving from
							// inside the element to outside, passing over the
							// scrollbar
							instance.elementtimeout = setTimeout(function() {
										$vBar.stop(true, true).jspmouseenter();
									}, 100);
						}).bind('mouseleave.jsp', function() {
					// hide the scrollbar after hovertimeout_t
					clearTimeout(instance.hovertimeout);
					instance.isScrollbarHover = false;
					instance.hovertimeout = setTimeout(function() {
						// if scrolling at the moment don't hide it
						if (!instance.isScrolling)
							$vBar
									.stop(true, true)
									.jspmouseleave(instance.extPluginOpts.mouseLeaveFadeSpeed
											|| 0);
					}, instance.extPluginOpts.hovertimeout_t);
				});
				$vBar.wrap($vBarWrapper);
			}
		}
	},
	// the jScrollPane instance
	jspapi = $el.data('jsp');
	// extend the jScollPane by merging
	$.extend(true, jspapi, extensionPlugin);
	jspapi.addHoverFunc();
}